<template>
    <div class="app-container">
      <div class="top-box">
        <div class="top-min-box">
          销售订单 SO2410240003
        </div>
        <div class="top-cent-box">
          <el-descriptions class="margin-top" title="" :column="4" style="width: 100%;"  border>
            <template slot="extra">
              <el-button type="primary" size="small">归档</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                采购方公司名称
              </template>
              国王点赛季第三
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                采购订单
              </template>
              国网
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                物质种类
              </template>
              金具
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                项目名称
              </template>
              <el-tag size="small">10千伏及以下配电网项目94100</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                合同名称
              </template>
              10千伏及以下配电同项目电力电缆,AC10KV,YJY.400,3.22.2C,无阳水采购合同 325 1188 号
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="content-box">
        <div class="letf-box">
          <el-card :class="index == 0 ? 'box-cards1' : 'box-card1'">
            <div @click="indexBnt(0)">
              <div class="title">第一步</div>
              <div class="text">维护销售订单行</div>
              <div class="num">1/1</div>
            </div>
          </el-card>
          <el-card :class="index == 1 ? 'box-cards1' : 'box-card1'" >
            <div @click="indexBnt(1)">
              <div class="title">第二步</div>
              <div class="text">制定排产计划</div>
              <div class="num">1/1</div>
            </div>
          </el-card>
          <el-card :class="index == 2 ? 'box-cards1' : 'box-card1'">
            <div @click="indexBnt(2)">
              <div class="title">第三步</div>
              <div class="text">填报生产订单</div>
              <div class="num">1/1</div>
            </div>
          </el-card>
          <el-card :class="index == 3 ? 'box-cards1' : 'box-card1'">
            <div @click="indexBnt(3)">
              <div class="title">第四步</div>
              <div class="text">填报生产数据</div>
              <div class="num">1/1</div>
            </div>
          </el-card>
          <!-- <el-card class="box-card1" >
            <div @click="indexBnt(4)">
              <div class="title">第五步</div>
              <div class="text">同步订单裁据</div>
              <div class="num">1/1</div>
            </div>
          </el-card>
          <el-card class="box-card1">
            <div @click="indexBnt(5)">
              <div class="title">第六步</div>
              <div class="text">触发质虽评分</div>
              <div class="num">1/1</div>
            </div>
          </el-card> -->
      </div>
      <div class="right-box">

        <el-card class="box-card" v-if="index == 0">
          <!-- <div class="bgtitle">采购订单行母缺失(0条)</div> -->
          <FactorySaleOrderColumnLists></FactorySaleOrderColumnLists>
          <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="88px">
              <el-form-item label="" prop="no" style="width: 400px;">
                <el-input v-model="queryParams.no" style="width: 400px;" placeholder="请输入工华编号/生产订单号/销售订单行项目"clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
              <el-form-item>
              <el-button icon="el-icon-plus" size="mini">新增销售订单行明细</el-button>
            </el-form-item>
          </el-form>
          <el-table border v-loading="loading" :data="dataList"
              :max-height="tableMaxHeight">
              <el-table-column label="销售订单行项目号" align="center" prop="purchaserlaCode"/>
              <el-table-column label="项目号" align="center" prop="supplierCode"/>
              <el-table-column label="物料种类" align="center" prop="supplierName"/>
              <el-table-column label="物料编码" align="center" prop="sellerConCode"/>
              <el-table-column label="物料名称" align="center" prop="conCode"/>
              <el-table-column label="物料数量" align="center" prop="poNo"/>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)" >编辑</el-button>
                  <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除</el-button>
                  <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(scope.row)"v-if="scope.row.status == 'wkp' && scope.row.amountReal == 0"style="margin-left: 10px;">
                    <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"/> -->
        </el-card>
        <el-card class="box-card" v-if="index == 1">
          <div class="bgtitle">制定排产计划</div>
          <FactoryProducePlanLists></FactoryProducePlanLists>
          <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="88px">
              <el-form-item label="" prop="no" style="width: 400px;">
                <el-input v-model="queryParams.no" style="width: 400px;" placeholder="请输入工华编号/生产订单号/销售订单行项目"clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
              <el-form-item>
              <el-button icon="el-icon-plus" size="mini">新増排产计划</el-button>
            </el-form-item>
          </el-form>
          <el-table border v-loading="loading" :data="dataList"
              :max-height="tableMaxHeight">
              <el-table-column label="排产计划编码" align="center" prop="purchaserlaCode"/>
              <el-table-column label="销售订单号" align="center" prop="supplierCode"/>
              <el-table-column label="销售订单行项目" align="center" prop="supplierName"/>
              <el-table-column label="物料名称" align="center" prop="sellerConCode"/>
              <el-table-column label="排产进度" align="center" prop="conCode"/>
              <el-table-column label="采购订单编码" align="center" prop="poNo"/>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)" >编辑</el-button>
                  <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除</el-button>
                  <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(scope.row)"v-if="scope.row.status == 'wkp' && scope.row.amountReal == 0"style="margin-left: 10px;">
                    <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"/> -->
        </el-card>
        <el-card class="box-card" v-if="index == 2">
          <div class="bgtitle">填报生产订单</div>
          <FactoryProduceMainLists></FactoryProduceMainLists>
          <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="88px">
              <el-form-item label="" prop="no" style="width: 400px;">
                <el-input v-model="queryParams.no" style="width: 400px;" placeholder="请输入工华编号/生产订单号/销售订单行项目"clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
              <el-form-item>
              <el-button icon="el-icon-plus" size="mini">新增生产工单</el-button>
            </el-form-item>
          </el-form>
          <el-table border v-loading="loading" :data="dataList"
              :max-height="tableMaxHeight">
              <el-table-column label="生产订单号" align="center" prop="purchaserlaCode"/>
              <el-table-column label="销售订单号" align="center" prop="supplierCode"/>
              <el-table-column label="销售订单行项目" align="center" prop="supplierName"/>
              <el-table-column label="采购订单号" align="center" prop="sellerConCode"/>
              <el-table-column label="采购订单行项目" align="center" prop="sellerConCode"/>
              <el-table-column label="实际开始日期" align="center" prop="conValidStartTime"/>
              <el-table-column label="实际结束日期" align="center" prop="conValidSEndTime"/>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)" >编辑</el-button>
                  <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(scope.row)"v-if="scope.row.status == 'wkp' && scope.row.amountReal == 0"style="margin-left: 10px;">
                    <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"/> -->
        </el-card>
        <el-card class="box-card" v-if="index == 3">
          <div class="bgtitle">填报生产数据</div>
          <FactoryProduceWorkLists></FactoryProduceWorkLists>
          <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="88px">
              <el-form-item label="" prop="no" style="width: 400px;">
                <el-input v-model="queryParams.no" style="width: 400px;" placeholder="请输入工华编号/生产订单号/销售订单行项目"clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
              <el-form-item>
              <el-button icon="el-icon-plus" size="mini">新增工单</el-button>
            </el-form-item>
          </el-form>
          <el-table border v-loading="loading" :data="dataList"
              :max-height="tableMaxHeight">
              <el-table-column label="生产订单号" align="center" prop="purchaserlaCode"/>
              <el-table-column label="销售订单号" align="center" prop="supplierCode"/>
              <el-table-column label="销售订单行项目" align="center" prop="supplierName"/>
              <el-table-column label="采购订单号" align="center" prop="sellerConCode"/>
              <el-table-column label="采购订单行项目" align="center" prop="sellerConCode"/>
              <el-table-column label="实际开始日期" align="center" prop="conValidStartTime"/>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)" >编辑</el-button>
                  <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(scope.row)"v-if="scope.row.status == 'wkp' && scope.row.amountReal == 0"style="margin-left: 10px;">
                    <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"/> -->
        </el-card>
      </div>
      </div>
    </div>

  </template>

  <script>
  import FactoryProducePlanLists from '@/views/develop/factory/factoryProducePlan/FactoryProducePlanList'
  import FactoryProduceMainLists from '@/views/develop/factory/factoryProduceMain/FactoryProduceMainList'
  import FactoryProduceWorkLists from '@/views/develop/factory/factoryProduceWork/FactoryProduceWorkList'
  import FactorySaleOrderColumnLists from '@/views/develop/factory/factorySaleOrderColumn/FactorySaleOrderColumnList'
  export default {
    name: 'SaleOrderDetail',
    components: {
      FactoryProducePlanLists,
      FactoryProduceMainLists,
      FactoryProduceWorkLists,
      FactorySaleOrderColumnLists
    },
    data() {
      return {
        index:0,
        baseUrl: process.env.VUE_APP_BASE_API,
        queryParams:{

          pageNum: 1,
          pageSize: 20,
        },
        // 遮罩层
        loading: true,
        // 总条数
        total: 9,
        dataList:[{
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        },
        {
          purchaserlaCode: 'HE20230005299',
          supplierCode: '4650011735',
          supplierName: '国网河北省电力有限公司',
          sellerSignStartTime: '2024-10-11',
          sellerSignEndTime: '2024-10-13',
          modifyStartTime: '待补全',
          conValidStartTime: '待补全',
          conValidSEndTime: '待补全',
          sellerConCode: '待补全',
          conCode: '待补全',
          poNo: '4100373079',
        }],
        tableMaxHeight: window.innerHeight - 320,
        url: {
            list: '/goodsInvoice/goodsInvoice/list',
            remove: '/goodsInvoice/goodsInvoice/',
            export: '/goodsInvoice/goodsInvoice/export',
        },
      };
    },
    created() {
      this.getList();
    },
    destroyed() {

    },
    methods: {
      indexBnt(e) {
          this.index = e
      },
      getList() {
          this.loading = true;
          // getAction(this.url.list, this.queryParams).then(response => {
          //     this.dataList = response.rows;
          //     this.total = response.total;
          //     this.loading = false;
          // });
          this.loading = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .app-container {
    .top-box {
      .top-min-box {
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 15px;
      }
      .top-cent-box {
        display: flex;
        align-items: center;
        .top-cent-item {
          padding-left: 10px;
          padding-right: 10px;
          border-right: 1px solid #626262;
          .title {
            color: #B6B5B7;
          }
          .text {
            margin-top: 10px;
          }
        }
        .bnt-box {
          margin-left: auto;
        }
      }
    }
    .content-box {
    // background: #F8F8F8;
      margin-top: 20px;
      display: flex;
      width: 100%;
      .letf-box {
        width: 10%;
        .box-card1 {
          margin-bottom: 20px;
          padding: 10px;
          display: flex;
          // align-items: center;
          justify-content: center;
          flex-direction: column;
          .title {
            font-size: 22px;
          }
          .text {
            margin-top: 10px;
          }
          .num {
            margin-top: 10px;
          }
        }
        .box-cards1 {
          margin-bottom: 20px;
          padding: 10px;
          display: flex;
          // align-items: center;
          justify-content: center;
          flex-direction: column;
          border-left: 10px solid #409EFF;
          .title {
            font-size: 22px;
          }
          .text {
            margin-top: 10px;
          }
          .num {
            margin-top: 10px;
          }
        }
      }
      .right-box {
        margin-left: 2%;
        width: 88%;
        .box-card {
          .bgtitle {
            margin-bottom: 20px;
          }
        }
        .box-card0 {
          flex: 1;
        }
      }
    }
  }
</style>

